<template>
  <div class="login-box">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >

    <h2>vue-ts-admin</h2>
      <el-form-item label="账号" prop="username">
        <el-input  v-model="ruleForm.username" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input
          v-model="ruleForm.password"
          type="password"
          autocomplete="off"
        />
      </el-form-item>
      

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">登陆</el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs} from "vue";
import {loginData} from "@/assets/typescript/login"
//引入范型
import type { FormInstance } from 'element-plus'
import {login} from "@/request/api"
import {useRouter} from "vue-router";

import { ElMessage } from 'element-plus'


//全局挂载proxy
import { getCurrentInstance } from 'vue';
export default defineComponent({
  setup() {

        //! 在集成了ts的项目中需加上any否则proxy会报错 { proxy }:any
        //!  全局挂载
      let  {proxy}:any  = getCurrentInstance()||null;
      // console.log(proxy.$test);

      console.log(process.env);
      
      

      const data = reactive(new loginData())
      const router = useRouter();

      // rules数据检验，静态数据，一成不变，所以静态定义即可
      const rules = {
        username: [{ 
            required:true,
            message:"请输入账号",
            trigger: 'blur' 
        },
        { 
            min:3,
            max:10,
            message:"账号长度3-10",
            trigger: 'blur' 
        }],
        password: [{ 
            min:3,
            max:10,
            required:true,
            message:"请输入密码",
            trigger: 'blur' 
        }],
      }

    // FormInstance为范型，由element-plus引入
      const ruleFormRef = ref<FormInstance>();

      const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
      }
      
      const submitForm = (formEl: FormInstance | undefined) => {
        console.log('submitForm');
        if (!formEl) return
        formEl.validate((valid) => {
          if (valid) {

            login(data.ruleForm).then(res=>{
              localStorage.setItem("token",res.data.token);
              ElMessage.success("登陆成功");
              setTimeout(() => {
                router.push("/home")
              }, 1500);
            })
            
          } else {
            console.log('error submit!')
            return false
          }
        })
      }
          

    return {...toRefs(data),rules,resetForm,submitForm,ruleFormRef,ElMessage};
  },

  
  

});
</script>

<style scoped lang="scss">
.login-box{
    width: 600px;
    height: 400px;
    border: 1px solid #000;
    border-radius: 10px;
    margin: 50px 0 0 300px;
    display: flex;
    justify-content: start;
    align-items: center;
}
h2{
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
</style>